<template>
	<view class="">
		<view class="scroll_header"></view>
		<scroll-view scroll-y="true" :style="{height: scrollHeight}" :scroll-top="scrollTop" @scroll="scroll"
			@scrolltolower="scrolltolower" refresher-enabled="true" :refresher-triggered="triggered"
			:refresher-threshold="100" @refresherpulling="onPulling" @refresherrefresh="onRefresh"
			@refresherrestore="onRestore">
			<view class="top_yellow" v-for="(cardlist,index) in cardLists" :key="index">
				<view class="card_list">
					<view class="txt">银行名称：{{cardlist.bank_name}}</view>
					<view class="txt">户名：{{cardlist.bank_user_name}}</view>
					<view class="txt">账号：{{cardlist.bank_card}}</view>
					<view class="txt-kh">开户行：{{cardlist.bank_region}}</view>
					<view class="txt">手机号：{{cardlist.bank_user_phone}}</view>
					<view class="set_bianji">
						<view class="bianji" @click="bianji_set(cardlist)">编辑</view>
						<view class="del_btn" @click="del(cardlist)">删除</view>
					</view>
				</view>

			</view>
		</scroll-view>
		<!-- 底部 -->
		<view class="foot">
			<view class="add_card" @click="add_card_go">添加银行卡</view>
		</view>
	</view>
</template>

<script>
	const SIZE = 10
	export default {
		data() {
			return {
				cardLists: [],
				more: 1, // 第几页
				count: 10, // 条数
				scrollHeight: 0, // 自适应高度
				u_loadmore: true, // 加载中
				triggered: false, // 下拉刷新
				total: 0, // 总条数
				scrollTop: 0,
				old: {
					scrollTop: 0
				}
			}
		},
		onLoad() {

		},
		onShow() {
			this.getData()
		},
		onReady() {
			// 获取屏幕尺寸的方法 start
			let _this = this
			uni.getSystemInfo({
				success(resu) {
					const query = uni.createSelectorQuery()
					query.select('.scroll_header').boundingClientRect()
					query.exec(function(res) {
						_this.scrollHeight = resu.windowHeight - res[0].bottom + 'px';
					})
				}
			})
			// 获取屏幕尺寸的方法 end
		},
		methods: {
			add_card_go() {
				uni.navigateTo({
					url: '/pagesC/dianpu_data/add_card'
				})
			},
			// 下拉刷新 自定义下拉刷新控件被下拉
			onPulling(e) {
				this.triggered = true;
			},
			// 滚动时触发
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			// 自定义下拉刷新被触发
			onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				setTimeout(() => {
					this.getData()
					this.triggered = false;
					this._freshing = false;
				}, 1000)
			},
			// 上拉加载函数
			scrolltolower(e) {
				let that = this
				// 每次上拉加载的数据比上一次多十个
				that.count += SIZE
				if (that.cardLists.length == that.total) {
					return
				} else {
					setTimeout(() => {
						that.getData()
					}, 1000)
				}
			},
			// 自定义下拉刷新被复位
			onRestore() {
				this.triggered = 'restore'; // 需要重置
			},
			// 上拉加载函数
			scrolltolower(e) {
				let that = this
				// 每次上拉加载的数据比上一次多十个
				that.count += SIZE
				setTimeout(() => {
					that.getData()
				}, 1000)
			},
			getData() {
				this.$H.post('v2/store/user/bank/list', {
					pagination: {
						count: this.count,
						page: this.more
					}
				}).then(res => {
					this.total = res.paginated.total
					if (res.status.succeed == 1) {
						this.cardLists = res.data
					}
					console.log("获取银行卡列表", res);
				})
			},
			// 编辑银行卡
			bianji_set(cardlist) {
				uni.navigateTo({
					url: '/pagesC/dianpu_data/add_card?id=' + cardlist.id
				})
			},
			// 删除银行卡
			del(cardlist) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '您确定要删除这张银行卡吗？',
					success: (res) => {
						console.log("点击了确定按钮");
						this.$H.post('v2/store/user/bank/delete', {
							bank_id: cardlist.id
						}).then(res => {
							console.log("删除成功", res);
							if (res.status.succeed == 1) {
								uni.showToast({
									title: '删除成功',
									icon: 'none'
								})
								that.getData()
							} else {
								uni.showToast({
									title: res.status.error_desc,
									icon: 'none'
								})
							}
						})
					}
				})
			},
		}
	}
</script>

<style>
	.set_bianji {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.del_btn {
		font-size: 30rpx;
		color: #ff0000;
		font-weight: 600;
		margin-left: 30rpx;
	}

	.bianji {
		font-size: 30rpx;
		color: #00aaff;
		font-weight: 600;
	}

	.add_card {
		font-size: 30rpx;
		color: #fff;
		font-weight: 600;
	}

	.foot {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 90rpx;
		background-color: #fd5822;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.txt-kh {
		width: 650rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 30rpx;
		color: #000;
		font-weight: 600;
		line-height: 50rpx;
	}

	.txt {
		font-size: 30rpx;
		color: #000;
		font-weight: 600;
		line-height: 50rpx;
	}

	.card_list {
		padding: 20rpx 0 20rpx 0;
		width: 650rpx;
		margin: auto;
	}

	.top_yellow {
		width: 690rpx;
		background: #f7b03a;
		margin: 20rpx auto auto;
		border-radius: 16rpx;
	}
</style>